<template>
  <div class="shop-list">
    <div class="shop-header">
      <input type="text" v-model="searchStr" />
    </div>

    <div class="shop-contain">
      <!-- 分类列表 -->
      <div class="contain-left">
        <div v-for="item in types" @click="selectType = item">
          {{ item }}
        </div>
      </div>

      <div class="contain-right">
        <div v-for="item in currentList">
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import obj from "@/mock/testList";
import { ref, computed, watch } from "vue";

const { allList, types } = obj;

const selectType = ref("全部");
const searchStr = ref("");

// 品类下模糊搜索
// const currentList = computed(() => {
//   let _value = selectType.value === "全部" ? "" : selectType.value;

//   return allList.filter(
//     (item) => item.name.includes(_value) && item.title.includes(searchStr.value)
//   );
// });

watch(searchStr, () => {
  selectType.value = "全部";
});

// 全品类搜索
const currentList = computed(() => {

  // 如果没有搜索，那么显示正常的分类
  if (searchStr.value === "") {
    let _value = selectType.value === "全部" ? "" : selectType.value;

    return allList.filter((item) => item.name.includes(_value));
  }

  // 有模糊搜索的话，则进行全品类title 的模糊匹配
  return allList.filter((item) => item.title.includes(searchStr.value));
});
</script>

<style lang="less" scoped>
.shop-list {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.shop-header {
  height: 250px;
  background: red;
}

.shop-contain {
  flex: 1;
  height: 0;
  overflow: hidden;
  background: green;
  display: flex;

  .contain-left {
    height: 100%;
    overflow-y: auto;
    width: 50px;
    background: #d7d7d7;
  }

  .contain-right {
    height: 100%;
    overflow-y: auto;
    flex: 1;
    width: 0;
    background: brown;
  }
}
</style>
